import React, { useContext } from 'react';
import Commontable from '@/common/CommonTable';
import { SongListTableConfig } from './config';
import _ from 'lodash';
import { AppContext } from '@/config/glableContextConfig';

const Songlist = ({ playlist }) => {
  const { setSongList, setList_key, setIsPlayer } = useContext(AppContext);
  const handlerClick = (record) => {
    setList_key(record.id);
    setSongList((origin) => {
      const newData = [...origin];
      if (!_.filter(newData, (o) => o.id === record.id).length) {
        newData.push(record);
      }
      return newData;
    });
    setIsPlayer(true);
  };
  const tableProps = {
    columns: _.map(SongListTableConfig, (item, key) => {
      const obj = { ...item };
      switch (obj.dataIndex) {
        case 'img':
          obj.render = (text, record, index) => {
            return (
              <div className="img-wrap">
                <img data-src={record.al.picUrl} />
                <span className="iconfont icon-bofang1" onClick={() => handlerClick(record)}></span>
              </div>
            );
          };
          break;
        case 'name':
          obj.render = (text, record) => {
            return (
              <div className="name-wrap">
                <span>{text}</span>
                {record.mv ? <span className="iconfont icon-mv icon-mv-style" onClick={() => alert('暂不支持!')}></span> : ''}
              </div>
            );
          };
          break;
      }
      return obj;
    }),
    dataSource: playlist.tracks || [],
    rowKey: 'id',
    pagination: false,
    className: 'Songlist',
  };

  return <Commontable {...tableProps} />;
};

export default Songlist;
